<template>
    <view class="container" :class="{ paddingBottomBar: isShowBottomBar }">
        <uni-load-more status="loading" v-if="isLoading"></uni-load-more>
        <view v-else>
            <view class="detail_top">
                <iconsfont
                    v-show="data.State == 2"
                    class="icon"
                    customIcons="icon-daijieshou iconcolor"
                    size="46"></iconsfont>
                <iconsfont
                    v-show="data.State == 3"
                    class="icon"
                    customIcons="icon-daifahuo1 iconcolor"
                    size="46"></iconsfont>
                <iconsfont
                    v-show="data.State == 4"
                    class="icon"
                    customIcons="icon-daifahuo1 iconcolor"
                    size="46"></iconsfont>
                <iconsfont
                    v-show="data.State == 5"
                    class="icon"
                    customIcons="icon-yifahuo iconcolor"
                    size="46"></iconsfont>
                <iconsfont
                    v-show="data.State == 6"
                    class="icon"
                    customIcons="icon-yiwancheng iconcolor"
                    size="46"></iconsfont>
                <iconsfont
                    v-show="data.State == 7"
                    class="icon"
                    customIcons="icon-yizhongzhi iconcolor"
                    size="46"></iconsfont>
                <view>{{ data.StateName }}</view>
            </view>
            <view class="order-main">
                <view class="order-item product-item">
                    <view class="title-text title-text-flex">
                        <view>订单金额</view>
                    </view>
                    <view class="cg_price">
                        <view>采购金额</view>
                        <view class="strong">￥{{ data.PriceSum }}</view>
                        <view class="cg_p_list">
                            <view>
                                <view>待审金额</view>
                                <view class="cg_p_list_1">¥{{ data.WaitCheckPrice }}</view>
                            </view>
                            <view>
                                <view>待付金额</view>
                                <view class="cg_p_list_2">¥{{ data.ArrearsPrice }}</view>
                            </view>
                            <view>
                                <view>已付金额</view>
                                <view class="cg_p_list_3">¥{{ data.PayPrice }}</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="order-item product-item">
                    <text class="title-text">商品清单</text>
                    <view class="order-item-main" @click="$refs.policyPop.open()">
                        <view class="order-item-imgs">
                            <view class="img-item" v-for="(item, index) in showImgs" :key="index">
                                <image mode="aspectFill" :src="easyGetImgUrl(item)" class="order-item-img"></image>
                                <view class="order-item-name" v-if="itemname">{{ itemname }}</view>
                            </view>
                            <uni-icons type="more" v-if="imgs.length > 3"></uni-icons>
                        </view>
                        <view class="right-box">
                            <view class="num-box">
                                <text class="order-desc">共{{ detailList.length }}种</text>
                                <text class="order-desc" v-show="false">数量{{ getTotalNum() }}</text>
                            </view>
                            <uni-icons type="arrowright" size="20" customIcons="icon-black"></uni-icons>
                        </view>
                    </view>
                </view>
                <view
                    class="order-item product-item product-item-line"
                    @click="goUrl('/pages_supplier/packet/order/logisticsList?orderId=' + id)">
                    <view class="title-text title-text-flex ptb0">
                        <view>发货记录</view>
                        <view class="title-text-right">
                            <uni-icons type="arrowright" size="20" customIcons="icon-gray-1"></uni-icons>
                        </view>
                    </view>
                </view>
                <view
                    class="order-item product-item product-item-line"
                    v-if="data.RefundExchangeList"
                    @click="goUrl('/pages_supplier/packet/returnOrder/index?OrderNo=' + data.ID)">
                    <view class="title-text title-text-flex ptb0">
                        <view>退货单</view>
                        <view class="title-text-right">
                            <uni-icons type="arrowright" size="20" customIcons="icon-gray-1"></uni-icons>
                        </view>
                    </view>
                </view>
                <view class="order-item product-item">
                    <view class="title-text title-text-flex">
                        <view>订单信息</view>
                    </view>
                    <view class="order-info">
                        <view class="order-info-item">
                            <text class="label">采购单号：</text>
                            <text class="value">{{ data.OrderNo }}</text>
                        </view>
                        <view class="order-info-item">
                            <text class="label">下单时间：</text>
                            <text class="value">{{ data.AddTime }}</text>
                        </view>
                        <view class="order-info-item" v-if="data.OrderSnList && data.OrderSnList.length > 0">
                            <view class="label">销售订单：</view>
                            <view class="value flexvalue">
                                <view :style="!showSn ? 'height:36rpx;overflow:hidden' : 'height:auto;'">
                                    <view v-for="(item, index) in data.OrderSnList">{{ item }}</view>
                                </view>
                                <uni-icons
                                    @click="showSn = !showSn"
                                    :type="showSn ? 'arrowup' : 'arrowdown'"
                                    v-if="data.OrderSnList.length > 1"
                                    size="20"
                                    customIcons="icon-black"></uni-icons>
                            </view>
                        </view>
                        <view class="order-info-item" v-if="data.Remark">
                            <text class="label">订单备注：</text>
                            <text class="value">{{ data.Remark }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view
            class="order-bottom-bar"
            v-if="
                !isLoading &&
                isShowBottomBar &&
                (data.State == 2 || data.State == 3 || data.State == 4 || data.State == 5)
            ">
            <order-state-menu :item="data" :bigbtn="1"></order-state-menu>
        </view>
        <uni-popup ref="policyPop" type="right" class="popupright" :safe-area="false">
            <view class="pop-pro-list" :style="'height:' + systemInfo.windowHeight + 'px'">
                <view class="pop-header">
                    <text class="text">商品清单</text>
                    <uni-icons class="icon-close" size="40" type="arrowleft" @click="$refs.policyPop.close()">
                    </uni-icons>
                </view>
                <scroll-view scroll-y class="scroll">
                    <view class="order-submit-list">
                        <view class="order-item">
                            <view class="order-submit-item" v-for="(item, index) in listData" :key="index" :item="item">
                                <view class="item-top">
                                    <image
                                        v-if="!getAppSet().isHideImg"
                                        class="product-img"
                                        :src="
                                            item.ProductImage
                                                ? easyGetImgUrl(item.ProductImage)
                                                : '/static/img/no-img.jpg'
                                        "
                                        mode="aspectFill"></image>
                                    <view class="product-info">
                                        <text class="product-name">{{ item.ProductName }}</text>
                                    </view>
                                </view>
                                <block v-for="subitem in item.SubItems">
                                    <view class="item-center">
                                        <view class="pro-item">
                                            <view class="left">
                                                <text class="label" v-if="subitem.DisplayAttribute"
                                                    ><text class="specification">{{
                                                        subitem.DisplayAttribute ? subitem.DisplayAttribute : "默认规格"
                                                    }}</text></text
                                                >
                                                <text class="label">
                                                    <text class="price-bold">￥{{ subitem.Price }}</text>
                                                    <text class="value product-num"
                                                        >x{{ subitem.Amount
                                                        }}{{
                                                            subitem.UnitName ? subitem.UnitName : subitem.DefaultUnit
                                                        }}</text
                                                    >
                                                </text>
                                            </view>
                                            <view class="right">
                                                <text class="value price-text"
                                                    >小计：￥{{ (subitem.Amount * subitem.Price).toFixed(2) }}</text
                                                >
                                            </view>
                                        </view>
                                    </view>
                                </block>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { mapGetters } from "vuex"
import orderPrice from "@/pages_supplier/components/order/order-price.vue"
import orderStateMenu from "@/pages_supplier/components/order/order-state-menu.vue"
import itemTitleBorder from "@/pages_supplier/components/order/item-title-border.vue"
import { GetBuyOrderById } from "@/pages_supplier/service/api/buyOrder.js"
export default {
    components: {
        itemTitleBorder,
        orderPrice,
        orderStateMenu,
    },
    data() {
        return {
            showSn: false,
            itemname: "", //单个商品显示名称
            remarkdesc: "",
            isShowBottomBar: false,
            id: 0,
            allPayPic: 0,
            data: {},
            detailList: [],
            isLoading: false,
            imgs: [],
            showImgs: [],
            statelist: [],
            stateCurrent: 0,
            listData: {},
            systemInfo: {},
        }
    },
    watch: {
        //监听更新
        getUpOrderView(e) {
            this.getDetail()
        },
    },
    computed: {
        ...mapGetters(["getUpOrderView"]),
    },
    onLoad(e) {
        this.id = e.id
    },
    mounted() {
        this.getDetail()
        this.isShowBottomBar = true
        this.systemInfo = uni.getSystemInfoSync()
        console.log(this.systemInfo)
    },
    methods: {
        //获取详情
        getDetail() {
            let path = "?id=" + this.id
            this.isLoading = true
            GetBuyOrderById(path).then((res) => {
                if (res.State == 1) {
                    this.data = res.Data
                    this.detailList = this.data.BuyOrderDetailList
                    this._dataformat(this.detailList)
                    this.getImageList(this.data.BuyOrderDetailList)
                    this.isLoading = false
                }
            })
        },
        _dataformat(data) {
            let items = []
            data.forEach((e) => {
                let filterItem = items.filter((item) => {
                    return item.ProductId == e.ProductId
                })
                if (filterItem.length < 1) {
                    let SubItems = []
                    SubItems.push(e)
                    let obj = {
                        ProductId: e.ProductId,
                        ProductName: e.ProductName,
                        ProductImage: e.ProductImage,
                        Attribute: e.DisplayAttribute,
                        SubItems: SubItems,
                    }
                    items.push(obj)
                } else {
                    filterItem[0].SubItems.push(e)
                }
            })
            this.listData = items
            console.log(this.listData)
        },
        getTotalNum() {
            let num = 0
            let allClass = []
            this.detailList.forEach((e) => {
                num += e.Amount
            })
            return num
        },
        getImageList(list) {
            let arr = []
            if (list) {
                list.forEach((e) => {
                    arr.push(e.ProductImage)
                })
            }
            if (list.length == 1) {
                this.itemname = list[0].ProductName
            }
            this.imgs = arr
            this.showImgs = arr.slice(0, 3)
            console.log(1)
        },
        goUrl(url) {
            this.easyGoTo(url)
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    background-color: $uni-bg-color-grey;
}

.order-item {
    background: $color-white;
    margin-bottom: 24rpx;
    // background: red;
}

.product-item {
    padding: $app-page-padding;
    border-radius: 8rpx;

    .title-text {
        display: flex;
        font-weight: 700;
        padding-bottom: 24rpx;
        padding-left: 24rpx;
        padding-right: 24rpx;
        border-bottom: 1rpx solid #ebebeb;
        margin-bottom: 24rpx;
        font-size: 28rpx;
        margin-left: -24rpx;
        margin-right: -24rpx;
        color: $color-gray-1;
    }

    .title-text-flex {
        justify-content: space-between;
        align-items: center;
    }

    .title-text-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .title-text-desc {
        font-size: $font-size-24;
        color: $color-gray-2;
        padding-right: 12rpx;
        font-weight: normal;
    }
}

.product-item-line {
    .title-text {
        border-bottom: none;
        margin-bottom: 0rpx;
    }
}

.order-item-main {
    display: flex;
    flex: 1;
    flex-direction: row;
}

.order-item-imgs {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;

    .img-item {
        position: relative;
        margin-right: 24rpx;
        display: flex;
        align-items: center;

        .order-item-name {
            flex: 1;
            font-size: 28rpx;
            color: $color-gray-1;
            display: flex;
            align-items: center;
            padding-left: 14rpx;
        }

        .order-item-img {
            display: flex;
            width: 120rpx;
            height: 120rpx;
            // border: 1px solid $app-color-main;
            border-radius: 8rpx;
        }

        .text-num {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40rpx;
            border-bottom-left-radius: 10rpx;
            border-bottom-right-radius: 10rpx;
            color: $color-white;
            background: rgba($color-black, 0.3);
            font-size: $font-size-24;
        }
    }
}

.right-box {
    display: flex;
    flex-direction: row;
    align-items: center;

    .num-box {
        display: flex;
        flex-direction: column;
        margin-right: 16rpx;

        text {
            margin-bottom: 4rpx;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

.order-header {
    height: 190rpx;
    background: $app-color-main;
}

.order-main {
    padding: 0 $app-page-padding;

    .order-title {
        height: 98rpx;
        padding: $app-page-padding 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .order-t-l {
            height: 98rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .order-header-button {
            width: 158rpx;
            height: 64rpx;
            background: #ffffff;
            border-radius: 32rpx;
            text-align: center;
            line-height: 64rpx;
            color: $app-color-main;
            font-size: $font-size-28;
        }

        text {
            font-weight: 700;
            font-size: $font-size-36;
            color: $color-white;
        }

        view {
            font-size: $font-size-24;
            color: $color-white;
        }
    }

    .order-user {
        // padding: $app-page-padding;
        display: flex;
        flex-direction: row;
        align-items: center;

        .location {
            width: 54rpx;
            height: 54rpx;
            border-radius: 27rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background: $app-color-main;
            margin-right: 20rpx;
        }

        .user-info {
            display: flex;
            flex: 1;
            display: flex;
            flex-direction: column;

            text {
                color: $app-color-text-mian;
            }

            .user-info-name {
                font-size: $font-size-30;
                font-weight: 700;
                margin-bottom: 12rpx;
                display: flex;
                align-items: center;
                image {
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 14rpx;
                }
            }

            .user-info-location {
                font-size: $font-size-24;
                line-height: 32rpx;
                color: $color-gray-3;
            }
        }
    }

    .order-items {
        padding: 30rpx $app-page-padding 1rpx;
    }

    .order-info {
        display: flex;
        flex-direction: column;

        .order-info-item {
            padding: 14rpx 0;
            display: flex;
            // flex-direction: row;

            text {
                font-size: $font-size-24;
            }

            .label {
                color: $app-color-text-tip;
                margin-right: 10rpx;
                width: 120rpx;
                white-space: nowrap;
                font-size: 24rpx;
            }

            .value {
                word-break: break-all;
                color: $app-color-text-mian;
                font-size: 24rpx;
            }
            .flexvalue {
                flex: 1;
                display: flex;
                justify-content: space-between;
                view {
                    padding-bottom: 5rpx;
                }
            }

            .order-info-image {
                width: 122rpx;
                height: 122rpx;
            }
        }
    }
}

.order-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    background: $color-white;
    box-shadow: 0px -2rpx 10rpx 0px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0 $app-page-padding;
}

.logistics {
    height: 88rpx;
    border-top: 1rpx solid #ebebeb;
    display: flex;
    padding: 0 $app-item-padding;
    justify-content: space-between;
    align-items: center;

    .logistics-title {
        font-size: $font-size-28;
        font-weight: bold;
    }

    .logistics-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .logistics-desc {
        padding-right: 12rpx;
    }
}

.remark {
    background: #f7f7f7;

    .remark-main {
        border-bottom: 1rpx solid #ebebeb;

        .remark-time {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: $color-gray-1;
            padding: 24rpx 24rpx 20rpx 24rpx;

            view {
                font-size: $font-size-28;
            }

            text {
                font-size: $font-size-24;
                color: $color-gray-3;
            }
        }

        .remark-desc {
            color: $color-gray-1;
            font-size: $font-size-24;
            padding: 0rpx 24rpx 20rpx 24rpx;
            word-break: break-all;
        }
    }

    & .remark-main:last-child {
        border: none;
    }
}
.remarkmenu {
    display: flex;
    padding: 24rpx;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    color: #2f2f2f;
    border: 1rpx solid #f7f7f7;
    border-top: none;
    text {
        color: $color-gray-3;
    }
}
.pop-return-box {
    background: $color-white;
    border-radius: $border-radius-10;
    padding: $app-page-padding;
    width: 600rpx;

    textarea {
        max-height: 350rpx;
        background: #f7f7f7;
        border-radius: 8rpx;
        border: 1rpx solid #979797;
        padding: 10rpx 0;
        text-indent: 10rpx;
        margin: 24rpx 0;
        width: 598rpx;
    }

    .pop-return-title {
        display: flex;
        justify-content: center;

        text {
            font-weight: 700;
            font-size: 34rpx;
        }
    }

    .pop-action {
        border-top: 1rpx solid rgba(0, 0, 0, 0.1);
        margin: 0 -24rpx -24rpx -24rpx;
        height: 110rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        view {
            width: 50%;
            text-align: center;
            height: 110rpx;
            line-height: 110rpx;
            font-size: 34rpx;
            font-weight: bold;
            color: $app-color-main;
        }

        & > view:first-child {
            color: $color-gray-1;
            border-right: 1rpx solid rgba(0, 0, 0, 0.1);
        }
    }

    .return-msg {
        margin-bottom: 20rpx;

        .card-group-cell {
            margin-left: 0 !important;
        }
    }

    .img-title {
        display: flex;
        color: $app-color-text-tip;
        margin-bottom: 20rpx;
    }

    .action {
        display: flex;
        flex-direction: row;

        .btn {
            flex: 1;
            border-radius: $border-radius-10;
            height: 70rpx;

            &:first-child {
                margin-left: 0;
            }
        }
    }
}

.pop-pro-list {
    background: #f1f1f1;
    border-radius: 24rpx 24rpx 0 0;

    .pop-header {
        display: flex;
        flex-direction: row;
        height: 88rpx;
        align-items: center;
        justify-content: center;
        // border-radius: 24rpx 24rpx 0 0;
        border-bottom: solid 12rpx #f1f1f1;
        background: #ffffff;

        .icon-close {
            position: absolute;
            right: 24rpx;
            color: $color-gray-3;
        }

        .text {
            font-size: $font-size-28;
            font-weight: 700;
        }
    }

    .scroll {
        height: calc(100vh - 100rpx);
    }
}
.popupright {
    .icon-close {
        right: auto !important;
        left: 24rpx;
        color: $color-gray-3;
    }
}
.step-pro-list {
    // background: #000;
    background: #f6f6f6;
    border-radius: 24rpx 24rpx 0 0;
    height: auto;
    padding-bottom: 0;
    height: 70vh;
    .pop-header {
        border-bottom: none;
    }
}
.ptb0 {
    padding-bottom: 0 !important;
}
.order-submit-list {
    background-color: $color-white;
    border-radius: $border-radius-10;
    .policy-price-box {
        display: flex;
        flex-direction: row;
        height: 60rpx;
        align-items: center;
        .label-text {
            flex: 1;
        }
    }
    .policy-after-price {
        display: flex;
        flex-direction: row;
        height: 60rpx;
        align-items: center;
        justify-content: flex-end;
    }
}

.order-submit-item {
    display: flex;
    flex-direction: column;
    border-bottom: 12rpx solid #f1f1f1;
    padding-bottom: 14rpx;
    padding: 24rpx;
    .item-top {
        display: flex;
        flex-direction: row;

        .product-img {
            width: 120rpx;
            height: 120rpx;
            border-radius: $border-radius-10;
            margin-right: 20rpx;
        }

        .product-info {
            display: flex;
            flex-direction: column;
            flex: 1;

            .product-name {
                font-weight: 700;
                font-size: $font-size-28;
                color: $app-color-text-mian;
                flex: 1;
                display: flex;
                align-items: center;
                margin-bottom: 14rpx;
            }

            .policy-text {
                flex: 1;
                padding-right: 12rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: normal;
                display: flex;
                color: #fa6400;
            }

            .arrow {
                border: solid #333333;
                border-width: 0 1px 1px 0;
                padding: 3px;
            }

            .arrow-down {
                margin-top: -4rpx;
            }

            .btn {
                flex-direction: row;
                font-size: $font-size-20;
                margin-left: 0;
            }
        }

        .btn-yellow-hollow {
            height: 48rpx;
            margin-bottom: 20rpx;
            width: auto;
            border-radius: 4rpx;
            border-color: rgba(0, 0, 0, 0);
            background: #ffffff;
            border: 1rpx solid #fa6400;

            .icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }
        }
    }

    .item-center {
        background: #f7f7f7;
        padding: 14rpx 24rpx;
        margin-top: 20rpx;

        .item-cell {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-bottom: 8rpx;

            .label {
                display: flex;
                flex: 1;
                color: $app-color-text-tip;
            }

            .value {
                display: flex;
                justify-content: flex-end;
            }
        }
    }

    .item-bottom {
        border-radius: $border-radius-10;
        padding: $app-page-padding;
        background: $app-color-input-bg;

        input {
            font-size: $font-size-24;
            color: $app-color-text-tip;
        }
    }
}

.policy-item {
    .policy-name {
        display: flex;
        flex: 1;
    }
}

.total-price {
    color: $app-color-main;
}

.product-num {
    color: $color-gray-1;
    font-size: 28rpx;
}

.pro-item {
    display: flex;
    flex-direction: row;

    .left {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-top: 4rpx;

        .label {
            font-size: 26rpx;
            color: $app-color-text-tip;
            padding: 6rpx 0;

            text {
                font-size: 26rpx;
            }
            .specification {
                font-size: 30rpx;
                color: $color-gray-1;
            }
        }
        .price-bold {
            color: #000;
            font-size: 32rpx;
            font-weight: bold;
            padding-right: 14rpx;
        }
    }

    .right {
        display: flex;
        align-items: center;

        .price-text {
            font-size: $font-size-28;
            color: $color-gray-1;
        }
    }
}
.detail_top {
    height: 104rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #222a42;
    image {
        width: 56rpx;
        height: 56rpx;
    }
    & > view {
        margin-left: 16rpx;
    }
}
.cg_price {
    font-size: 24rpx;

    color: #898b9d;
    .strong {
        font-size: 42rpx;
        color: #222a42;
        font-weight: bold;
    }
    .cg_p_list {
        padding-top: 28rpx;
        display: flex;
        justify-content: space-between;
        .cg_p_list_1 {
            font-weight: bold;
            font-size: 32rpx;
            color: #fe6f32;
        }
        .cg_p_list_2 {
            font-weight: bold;
            font-size: 32rpx;
            color: $app-color-main;
        }
        .cg_p_list_3 {
            font-weight: bold;
            font-size: 32rpx;
            color: #505368;
        }
    }
}
.iconcolor {
    color: #222a42;
}
</style>
